<template>
	<view>
		<view class="list" v-if="showPage">
			<text class="biaoti">维修详情</text>
		</view>
		<view class="line" v-if="showPage" />
		<picker :range="houseArray" @change="onPickerChange1" range-key='name' :disabled="showPage">
			<view class="list">
				<text class="title required">房源名称</text>
				<input type="text" placeholder="请选择" v-model="form.houseName" disabled/>
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode=""
					class="more_icon" v-if="!showPage">
				</image>
			</view>
		</picker>
		<view class="line" />
		<picker :range="mainTypeArray" @change="onPickerChange2" range-key='valueName' :disabled="showPage">
			<view class="list">
				<text class="title required">报修类目</text>
				<input type="text" placeholder="请选择" v-model="form.maintenanceName"  disabled />
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode=""
					class="more_icon" v-if="!showPage">
				</image>
			</view>
		</picker>
		<view class="line" />
		<view class="list">
			<text class="title required">维修时间</text>
			<uni-datetime-picker v-model="form.uploadTime" :disabled="showPage">
				<input type="text" placeholder="请选择" v-model="form.uploadTime" disabled />
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode=""
					class="more_icon" v-if="!showPage">
				</image>
			</uni-datetime-picker>
		</view>
		<view class="line" />
		<view class="list">
			<text class="title required">维修地址</text>
			<input type="text" style="width: 520rpx;" placeholder="栋 - 楼层 - 房号" v-model="form.address" :disabled="showPage" />
		</view>
		<view class="line" />
		<view class="list">
			<text class="title required">联系方式</text>
			<input type="text" placeholder="请输入" v-model="form.phone" disabled />
		</view>
		<view class="line" />
		<view class="list required">
			<text class="title">问题描述</text>
		</view>
		<view class="list" style="padding-top: 0;">
			<textarea placeholder="请输入（最多允许300字）" v-model="form.remark" placeholder-style="color:#ccc;"
				class="textarea" :disabled="showPage" />
		</view>
		<view class="list" style="margin-top: 16rpx;">
			<text class="biaoti required">报修附图</text>
			<text class="tip">（上传需要维修的物品损坏照片，至少一张）</text>
		</view>
		<view class="list" style="padding-top: 0;">
			<view class="upload_box">
				<view style="position: relative;" v-for="(item,index) in form.imageUrls" :key="index">
					<image :src="item" mode="aspectFit" class="photo" @click="previewImage(index)"></image>
					<deleteBtn :index="index" @clearItem="deleteImage" v-if="!showPage"></deleteBtn>
				</view>
				<view class="upload" @click="handleUpload" v-if="!showPage" >
					<image src="/pagesA/static/xiangji.svg" mode="" class="upload_icon"></image>
					<text class="upload_text">上传图片</text>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 200rpx;"/>
		<view class="bottom_box" v-if="!showPage">
			<view class="add_btn" @click="handleSubmit">
				提交申请
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watchEffect
	} from 'vue';
	import {
		maintenanceTypes,
		renterPage,
		maintenanceAdd,
		maintenanceDetail
	} from './js/api.js'
	import http from '@/uitls/http.js';
	import {onLoad} from '@dcloudio/uni-app'
	import {chooseImageFun} from '../../uitls/upload.js'
	const app = getApp()
	const form = reactive({
		houseId: '',
		houseName: '',
		address: '',
		imageUrls: [],
		maintenanceType: '',
		maintenanceName: '',
		phone: app.globalData.phoneNumber,
		remark: '',
		uploadTime: ''
	})

	const mainTypeArray = ref([])
	const getMainTypeData = async () => {
		let res = await maintenanceTypes()
		console.log('res==maintenanceTypes', res)
		if (res.data.code == 0) {
			let data = res.data.data
			mainTypeArray.value = data
			// console.log('res==maintenanceTypes',res)
		}
	}
	const onPickerChange1 = (e) => {
		console.log(e.detail.value)
		let index = e.detail.value
		let itemObj = houseArray.value[index]
		form.houseName = itemObj.name
		form.houseId = itemObj.id
		form.address = itemObj.address


	}
	const onPickerChange2 = (e) => {
		console.log(e.detail.value)
		let index = e.detail.value
		let itemObj = mainTypeArray.value[index]
		form.maintenanceType = itemObj.valueId
		form.maintenanceName = itemObj.valueName
	}
	const houseArray = ref([])
	const getRenterPagesData = async () => {
		let res = await renterPage()
		console.log('renterPage===', res)
		if (res.data.code == 0) {
			let list = res.data.data.list
			houseArray.value = list
		}
	}
	const handleSubmit = ()=>{
		console.log('点击提交===',form)
		if(!form.houseId) return http.isMssage('请选择提报房源')
		if(!form.maintenanceType) return http.isMssage('请选择报修类目')
		if(!form.uploadTime) return http.isMssage('请选择维修时间')
		if(!form.address) return http.isMssage('请填写地址')
		if(!form.remark) return http.isMssage('请大概描述下问题')
		if(form.imageUrls.length == 0) return http.isMssage('请上传维修物品损坏图片')
		uplodMaintAdd()
	}
	const uplodMaintAdd = async () => {
		let params = {
			address:form.address,
			houseId:form.houseId,
			imageUrls:form.imageUrls,
			maintenanceType:form.maintenanceType,
			phone:form.phone,
			remark:form.remark,
			uploadTime:form.uploadTime
		}
		let res = await maintenanceAdd(params)
		console.log('maintenanceAdd===', res)
		if (res.data.code == 0) {
			http.isMssage('提交成功')
			uni.navigateBack()
		}else{
			http.isMssage(res.data.message)
		}
	}
	// 预览图片
	const previewImage = (index) => {
	  uni.previewImage({
	    current: form.imageUrls[index], // 当前显示图片的URL
	    urls: form.imageUrls.map(item => item), // 需要预览的图片URL列表
	    success: () => {
	      console.log('预览成功');
	    },
	    fail: (err) => {
	      console.error('预览失败', err);
	    }
	  });
	};
	onMounted(() => {
		getMainTypeData()
		getRenterPagesData()
	})
	const showPage =ref(false)
	onLoad((options)=>{
		if(options.id){
			showPage.value = true
			getMainDetail(options.id)
		}
	})
	const getMainDetail = async (id)=>{
		let res = await maintenanceDetail(id)
		if(res.data.code == 0){
			let data= res.data.data
			form.address=data.address
			form.houseName=data.houseName
			form.imageUrls = data.imageUrls
			form.maintenanceType = data.maintenanceType
			form.maintenanceName = data.maintenanceTypeName
			form.phone =data.phone || ' '
			form.remark = data.remark
			form.uploadTime = data.uploadTime
		}
	}
	const handleUpload = async() => {
		let res = await chooseImageFun('maintenance')
		if(res.imageUrl){
			form.imageUrls.push(res.imageUrl)
		}
	}
	const deleteImage =(index)=>{
		form.imageUrls.splice(index, 1)
	}
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.list {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		padding: 30rpx;
		background: #FFFFFF;
		position: relative;

		.title {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #333333;
			font-weight: 400;
			width: 140rpx;
			text-align: left;
		}

		.type {
			font-size: 28rpx;

		}

		input {
			font-size: 28rpx;
		}

		.more_icon {
			position: absolute;
			right: 30rpx;
			top: 34rpx;
			width: 24rpx;
			height: 40rpx;
		}

		.biaoti {
			font-family: PingFangSC-Semibold;
			font-size: 32rpx;
			color: #000000;
			line-height: 36rpx;
			font-weight: 600;
			margin-right: 16rpx;
		}

		.tip {
			font-family: PingFangSC-Regular;
			font-size: 24rpx;
			color: #999999;
			line-height: 36rpx;
			font-weight: 400;
		}

		.textarea {
			width: 658rpx;
			height: 200rpx;
			// margin: auto;
			background: #F8F8F8;
			border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 8rpx;
			padding: 16rpx;
			font-size: 28rpx;
		}

		// .upload_box {
		// 	width: 100%;
		// 	border: 1rpx solid rgba(238, 238, 238, 1);
		// 	border-radius: 8rpx;
		// 	height: 200rpx;
		// 	display: flex;
		// 	// flex-direction: column;
		// 	justify-content: center;
		// 	align-items: center;

		// 	.upload {
		// 		display: flex;
		// 		flex-direction: column;
		// 		justify-content: center;
		// 		align-items: center;

		// 		.upload_icon {
		// 			width: 60rpx;
		// 			height: 60rpx;
		// 		}

		// 		.upload_text {
		// 			margin-top: 16rpx;
		// 			font-family: PingFangSC-Regular;
		// 			font-size: 28rpx;
		// 			color: #999999;
		// 			text-align: center;
		// 			font-weight: 400;
		// 		}
		// 	}

		// }
		.upload_box {
			width: 100%;
			// border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 8rpx;
			// height: 200rpx;
			// display: flex;
			// flex-direction: column;
			// justify-content: center;
			// align-items: center;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 16rpx;
		
			.photo {
				height: 156rpx;
				width: 156rpx;
				// margin-right: 22.56rpx;
				border: 1rpx solid rgba(238, 238, 238, 1);
				border-radius: 8rpx;
			}
		
			.upload {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: 1rpx solid rgba(238, 238, 238, 1);
				border-radius: 8rpx;
				height: 156rpx;
				width: 156rpx;
		
				.upload_icon {
					width: 60rpx;
					height: 60rpx;
				}
		
				.upload_text {
					margin-top: 16rpx;
					font-family: PingFangSC-Regular;
					font-size: 28rpx;
					color: #999999;
					text-align: center;
					font-weight: 400;
				}
			}
		
		}
	}

	.line {
		background: #eeeeee;
		height: 1rpx;
		margin: 0 30rpx;
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0 60rpx 0;
		background: #FFFFFF;
		width: 100%;

		.add_btn {
			width: 626rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
			border-radius: 50rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 400;
		}
	}
</style>